import React, { Component } from 'react'
import { connect } from 'react-redux'
import LinkListItem from './linkListItem'
import { QaAction } from '../../actions'
import { Request, Data } from '../../utils/Global'
import { API } from '../../utils/config'


class LinkMask extends Component {
  renderItems() {
    const { link_list, search_value, link_loading } = this.props
    const reg = new RegExp(search_value)
    const realList = []
    link_list.map((item, index) => {
      if (reg.test(item.nickname) && item.id !== Data.user.id) {
        realList.push(item)
      }
    })
    const ls = []
    realList.map((item, index) => {
      ls.push(
        <LinkListItem item={item} key={index} index={index} />
      )
    })
    if (realList.length === 0 && link_loading) {
      return (
        <div className="no_list">获取中...</div>
      )
    }
    if (realList.length === 0) {
      return search_value !== '' ? (
        <div className="no_list">搜索结果为空</div>
      ) : (
          <div className="no_list">暂无可选成员</div>
        )
    }
    return ls
  }
  onChange = () => {
    const { dispatch } = this.props
    const { setSearchValue } = QaAction
    console.log('setSearchValue', this.input.value)
    dispatch(setSearchValue(this.input.value))
  }
  clickClose = () => {
    const { dispatch } = this.props
    const { toggleShowLink, setSearchValue } = QaAction
    dispatch(toggleShowLink(false))
    dispatch(setSearchValue(''))
  }
  async getLinks() {
    const { toggleLinkLoading, initLinkList } = QaAction
    const { dispatch } = this.props
    dispatch(toggleLinkLoading(true))
    const ld = await this.linkPromise()
    dispatch(toggleLinkLoading(false))
    if (ld) {
      dispatch(initLinkList(ld))
    } else {
      alert('错误')
    }
  }
  linkPromise = () => {
    const { info } = this.props
    return new Promise((resolve, reject) => {
      Request.SendRequest(API.GET_USER_LIST(info.id, info.token), 'GET', null, (res) => {
        if (res.status) {
          resolve(res.data)
        } else {
          resolve(null)
        }
      }, (err) => {
        resolve(null)
      })
    })
  }
  componentDidMount() {
    this.getLinks()
  }
  renderLoading() {
    const { link_loading } = this.props
    return link_loading ? (
      <div className="link_loading">
        <img className="link_loading_icon" src={require('../../images/indicator_verybig.gif')} alt=""/>
      </div>
    ) : null
  }
  render() {
    return (
      <div className="link_mask">
        <div className="link_mask_inner">
          { this.renderLoading() }
          <div className="link_search">
            <img
              onClick={this.clickClose}
              className="close_icon"
              src={require('../../images/link_close_icon.png')} alt=""
            />
            <div className="input_con">
              <input
                ref={r => this.input = r}
                onChange={this.onChange}
                className="input"
                type="text" />
            </div>
          </div>
          <div className="link_list">
            <div className="link_list_inner">
              {this.renderItems()}
            </div>
          </div>
        </div>
      </div>
    )
  }
}

const mapStateToProps = (state) => {
  return Object.assign({}, state.QaState, {
    info: state.MainScreenState.info
  })
}
export default connect(mapStateToProps)(LinkMask)
